/* General setup */
  
html,body {
    font-family: 'microsoft yahei';
    line-height: 24px;
    padding: 0;
    margin: 0;
}

h1 {
    color: green;
    margin-left: .5rem;
}
.no-support-tips {
    color:crimson;
    font-weight: bold;
    font-size: 24px;
}
header{
    background: #e9ffec; 
    padding: 20px 100px;
}
main{
    padding: 0 100px;
}
@media screen and (max-width: 1400px){
    header{ padding: 20px 50px; }
    main{ padding: 0 50px; }
}
.examples{
    margin: 35px 20px 20px 20px;
}
.examples-tips{
    font-size: 12px;
    color: #aaa;
    position: relative;
}
.sm4, .sm4-html, .sha-html, .aes-html, .model-html{
    display: none;
}
.active{
    display: block;
}
.all-performance-button {
    position: relative;
    top: -8px;
    font-weight: bold;
}
.encrypt-decrypt{
    padding: 5px 40px 10px;
    border: 3px solid #04a506;
    border-radius: 6px;
    margin: 10px 0 30px 0;
}
.encrypt-type {
    margin-left: 20px;
    user-select: none;
    vertical-align: text-top;
}
.encrypt-type > i{
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    padding: 4px 12px;
    display: inline-block;
    text-align: center;
    border: 1px solid #309e30;
    border-radius: 7px;
    cursor: pointer;
}
.encrypt-type > i:hover{
    background: #dafbda;
    border: 1px solid #06b706;
}
.encrypt-type > i.active{
    background: #0fb711;
    color: #fff;
    border: 1px solid #0fb711;
}
.key, .iv {
    border: 1px solid #dfdfdf;
    border-radius: 2px;
    padding: 4px 8px;
    margin: 0 0 5px 0;
    width: 260px;
}
.key:focus, .iv:focus {
    outline-color: #8ad2a4;
}
.key{
    margin-right: 20px;
}
.operation{
    margin: 15px 0;
}
.operate-btn{
    background: #0fb711;
    padding: 8px 25px 10px;
    color: #fff;
    font-size: 16px;
    border: none;
    border-radius: 2px;
    letter-spacing: 1px;
    cursor: pointer;
    user-select: none;
}
.operate-btn:hover{
    background: #34c536;
}
.performance-container, #testTimes, #testDataSize{
    display: none;
}
.performance-begin {
    margin-left: 30px;
    font-weight: bold;
}
.performance-button{
    background: #2525ea;
}
.performance-button:hover{
    background: #4a4ae8;
}
.performance {
    display: none;
}
textarea {
    width: 100%;
    padding: 6px 12px;
    border-radius: 4px;
    border-color: #dfdfdf;
    background: #f7fff7;
    font-family: 'microsoft yahei';
}
textarea:focus{
    outline-color: #8ad2a4;
}
.ciphertext, .decrypted {
    display: none;
}
.error-tip{
    color: #f00;
}

/* 性能测试弹层 */
.all-performance {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform:translate(-50%,-50%);
    margin: 0;
    padding: 0;
    background-color: #fff;
    border-radius: 2px;
    box-shadow: 1px 1px 50px rgba(0,0,0,.3);
    z-index: 100;
    min-width: 700px;
    min-height: 350px;
}
.performance-title {
    font-weight: bold;
    font-size: 20px;
    padding: 15px 0;
    text-align: center;
    background: #eee;
}
.close-all-performance {
    cursor: pointer;
    font-size: 30px;
    position: absolute;
    right: 0;
    top: 0px;
    padding: 8px 14px;
}
#testTimes, #testTime, #testDataSize, #testType{
    border: 1px solid #ccc;
    padding: 4px 5px 3px;
    border-radius: 12px;
    margin-left: 4px;
}
span#testCount input{
    padding: 3px 0 3px 10px;
    border-radius: 2px;
    font-size: 14px;
}
.layui-layer-shade{
    display: none;
    z-index: 10;
    background-color: rgb(0, 0, 0);
    opacity: 0.3;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    pointer-events: auto;
}
/*表格样式*/
table {
    width: 90%;
    background: #ccc;
    margin: 20px auto;
    border-collapse: collapse;/*border-collapse:collapse合并内外边距(去除表格单元格默认的2个像素内外边距*/
}
th,td {
    height: 25px;
    line-height: 25px;
    text-align: center;
    border: 1px solid #ccc;
}
th {
    background: #eee;
    font-weight: normal;
}
tr {
    background: #fff;
}
tr:hover {
    background: #acff91;
}
/* Animate output display */
.fade-in {
    animation: fadein .5s;
}

@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
